<template>
	<!-- 门票管理-添加或修改 -->
	<div>
		<MyNavbar :title="navTitle">
		</MyNavbar>
		
		<div class="base-box">
			<u-form :model="form" labelPosition="top" labelWidth="100%">
				<u-form-item label="门票封面">
					<MyImgUpload v-model="form.poster"/>
				</u-form-item>
				<u-form-item label="门票标题">
					<u-input v-model="form.title" clearable placeholder="门票标题"/>
				</u-form-item>
				<u-form-item  label="状态">
					<u-switch v-model="form.state" :inactiveValue="0" :activeValue="1"></u-switch>
					<span style="margin-left: 24rpx;">{{form.state===1?'上架':'停售'}}</span>
				</u-form-item>
				<u-form-item  label="门票基础价格">
					<u-input v-model="form.price" clearable type="number" placeholder="门票基础价格"/>
				</u-form-item>
				
				<!-- 修改时不应该直接改库存，只能弹出新增或减少。 -->
				<u-form-item  label="门票数量">
					<u-input v-model="form.stock" clearable type="number" placeholder="门票数量"/>
				</u-form-item>
				<u-form-item  label="门票有效时间开始">
					<div >
						<u-input v-model="form.beginTime" clearable placeholder="开始时间"/>
						<!-- 先不用 -->
						<u-datetime-picker
							v-model="form.beginTime" :show.sync="showBeginTime" mode="date"
							:minDate="minDate" @close="showBeginTime=false" @cancel="showBeginTime=false"
							@confirm="onConfirmBeginTime"
						></u-datetime-picker>
					</div>
				</u-form-item>
				<u-form-item  label="门票有效时间结束">
					<div >
						<u-input v-model="form.endTime" clearable placeholder="结束时间"/>
					</div>
				</u-form-item>
				<u-form-item  label="巡剪城市">
					<div >
						<u-input v-model="form.city" clearable placeholder="巡剪城市"/>
					</div>
				</u-form-item>
				<u-form-item  label="详细地址">
					<u-textarea v-model="form.address" clearable placeholder="详细地址"/>
				</u-form-item>
				<u-form-item  label="温馨提示">
					<u-textarea v-model="form.tips" clearable placeholder="温馨提示"/>
				</u-form-item>
				<u-form-item  label="门票详情">
					<u-textarea v-model="form.details" clearable placeholder="门票详情"/>
				</u-form-item>
				
				<div class="flex-column">
					<u-button type="primary" :loading="loading" text="保 存" @click="onClickSubmit"></u-button>
					<div style="height: 24rpx;"></div>
					<u-button v-if="operType==='edit'" type="error" plain :loading="loading" text="删 除" @click="onClickDelete"></u-button>
				</div>
			</u-form>
		</div>
		
	</div>
</template>

<script>
	import MyImgUpload from '@/components/form/MyImgUpload.vue';
	import {mapState, mapMutations} from 'vuex';
	
	export default {
		components: {
			MyImgUpload,
		},
		data() {
			return {
				loading: false,
				// 操作类型，add：添加，edit：修改
				operType: 'add',
				// 表单
				form: {
					title: '全国巡剪活动',
					price: 0,
					stock: 10,
					beginTime: "2022-02-21",
					endTime: "2022-02-23",
					tips: '该价格是基础价格，消费过程中会根据你的需求，做对应的理发、造型等项目。',
					details: '全国巡剪活动，火热进行中...',
					address: '市区',
					// 状态
					state: 1,
				},
				// 可选择的最小时间，时间戳
				minDate: Date.now(),
				//  显示开始时间选择器
				showBeginTime: false,
			}
		},
		computed: {
			...mapState('admin', {
				currentShopUid: 'currentShopUid',
			}),
			navTitle(){
				let {operType} = this;
				if (operType === 'add') {
					return '门票-添加';
				}
				return '门票-编辑';
			},
		},
		onLoad(option) {
			this.operType = option.operType || 'add';
			this.initRowInfo(option.uid);
		},
		methods: {
			/**
			 * 初始化表单信息
			 */
			initRowInfo(uid){
				if (!uid) {
					return;
				}
				this.$api.goods.get({uid: uid}).then(({data})=>{
					this.form = data;
				});
			},
			// 点击保存
			onClickSubmit(){
				let form = this.form;
				form.shopUid = this.currentShopUid;
				this.loading = true;
				this.$api.goods.save(form).then(res=>{
					this.$utils.showSuccess('保存成功');
					uni.navigateBack();
					this.loading = false;
				}).catch(e=>{
					this.loading = false;
				});
			},
			// 点击删除
			onClickDelete(){
				uni.showModal({
					title: "确定删除？",
					success: (res)=>{
						if (res.confirm !== true) {
							return;
						}
						let {form} = this;
						this.$api.goods.del(form).then(res=>{
							this.$utils.showSuccess('删除成功');
							uni.navigateBack();
						}).catch(e=>{
						});
					},
				})
			},
			// 确定选择开始时间
			onConfirmBeginTime(value){
				console.log(" 确定选择开始时间 value: ", value);
			},
		},
		
	}
</script>

<style scoped>
	
</style>
